<!--
 * @Author: panda
 * @Date: 2022-05-18 09:30
 * @Description: 文章搜索结果容器
-->
<template>
  <!-- 文章列表展示卡片 -->
  <!-- 专栏内容展示区 -->
  <div>
    <el-card class="box-card" shadow="hover" v-for="a in articles" :key="a.id">
      <div class="card-header">
        <span class="title" @click="toDetail(a.id)">{{ a.title }}</span>
      </div>
      <el-container>
        <el-aside width="256">
          <el-space direction="vertical" alignment="left" size="large">
            <el-image
              fit="cover"
              style="
                border-radius: 5px;
                margin-top: 20px;
                width: 320px;
                height: 220px;
              "
              :src="a.thumbnail"
            />
            <span>创建时间 {{ a.createTime }}</span>
          </el-space>
        </el-aside>
        <el-main>
          <div class="article-thumbnail" @click="toDetail(a.id)">
            {{ a.title }}
          </div>
        </el-main>
      </el-container>
      <div style="float: right" v-show="isShowBtn">
        <el-button
          type="primary"
          :icon="Edit"
          circle
          @click="editArticle(a.id)"
        />
        <el-button
          type="danger"
          :icon="Delete"
          circle
          @click="deleteArticle(a.id)"
        />
      </div>
    </el-card>
    <el-pagination
      style="margin: 20px"
      v-model:currentPage="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20]"
      background
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { userApi } from "@/api/user";
import { InitArticleList } from "@/api/model/article";
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { articleApi } from "@/api/article";
import { useUserStore } from "@/store/modules/user";

export default defineComponent({
  name: "VideoList",
  components: {},
  props: { userid: String },
  setup(props) {
    // 组件文章列表以及当前分页属性
    const article = reactive(new InitArticleList());
    //分页
    const pageNum = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const curUserId = ref(0);
    const router = useRouter();
    const route = useRoute();
    const userStore = useUserStore();
    const isShowBtn = computed(() => {
      return route.params.id === userStore.getUserInfo.id;
    });

    const getArticles = (id: number) => {
      userApi
        .getArticles({
          id: id,
          pageNum: pageNum.value,
          pageSize: pageSize.value,
          categoryId: undefined,
        })
        .then((res) => {
          console.log("拿到数据=====>", res.data.data);
          const { data } = res.data;
          article.articles = data.rows;
        })
        .catch();
    };

    watch(
      () => props.userid,
      (cur) => {
        curUserId.value = Number(cur);
        userApi
          .getArticles({
            id: curUserId.value,
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            categoryId: undefined,
          })
          .then((res) => {
            console.log("拿到数据vvvvvvvvvv=====>", res.data.data);
            const { data } = res.data;
            article.articles = data.rows;
            total.value = Number(data.total);
          })
          .catch();
      }
    );

    const handleSizeChange = (val: number) => {
      pageSize.value = val;
      getArticles(curUserId.value);
    };
    const handleCurrentChange = (val: number) => {
      pageNum.value = val;
      getArticles(curUserId.value);
    };

    //跳转详情页面
    const toDetail = (id: number) => {
      const routeData = router.resolve({
        path: "/articles/" + id,
      });
      window.open(routeData.href, "_blank");
    };

    //TODO
    const editArticle = (id: number) => {
      const routeData = router.resolve({
        path: "/modifyArticle/" + id,
      });
      window.open(routeData.href, "_blank");
    };

    const deleteArticle = (id: number) => {
      articleApi
        .deleteArticle({ id })
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage({
              message: res.data.msg,
              type: "success",
            });
            getArticles(curUserId.value);
          } else {
            ElMessage({
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          ElMessage({
            message: err,
            type: "error",
          });
        });
    };
    return {
      Delete,
      Edit,
      deleteArticle,
      editArticle,
      isShowBtn,
      ...toRefs(article),
      toDetail,
      total,
      pageNum,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
    };
  },
});
</script>

<style scoped>
/* 文章列表样式 */
.title {
  font-size: 20px;
}

.article-thumbnail {
  font-size: 16px;
}

.box-card {
  /*width: 750px;*/
  margin-top: 15px;
  padding-bottom: 20px;
}

/* 文章列表样式 */
.title {
  font-size: 20px;
}

.article-thumbnail {
  font-size: 16px;
}

.box-card {
  /*width: 750px;*/
  margin-top: 15px;
  padding-bottom: 20px;
}
</style>
